<template>
  <view class="container">
    <view class="activityName">
      <p style="margin-left: 10rpx;">活动名称：</p>
      <input type="text" placeholder="请填写活动名称">
      <!-- <u-field required v-model="activityName" label="活动名称:" placeholder="请填写活动名称" style="font-size:50rpx;">
      </u-field> -->
    </view>
    <u-line class="u-line"></u-line>
    <view class="applyReason">
      <p style="margin-left: 10rpx;">申请原因:</p>
      <view class="reasonBorder">
        <textarea style="height:scrollHieght" v-model="applyReason" cols="30" rows="6" placeholder="请填写活动名称"></textarea>
      </view>
    </view>
    <u-line class="u-line"></u-line>
    <view class="needed">
      <p style="margin: 10rpx;">预估经费:</p>
      <u-keyboard ref="uKeyboard" mode="number" v-model="show"></u-keyboard>
      <view class="" style="margin-left: 50rpx;">
        <u-row gutter="16">
          <u-col span="5">
            <view style="display: flex;justify-content: center;align-items: center;" class="neededTitle">用途</view>
          </u-col>
          <u-col span="5">
            <view style="display: flex;justify-content: center;align-items: center;" class="neededTitle">预计经费</view>
          </u-col>
        </u-row>
      </view>
      <view v-for="(needed, index) in neededMoney" class="" style="margin-left: 50rpx;">
        <u-row gutter="16">
          <u-col span="5">
            <input type="text" class="neededTitleWord" placeholder="请输入用途" v-model="needed.name">
          </u-col>
          <u-col span="5">
            <input type="text" class="neededTitleWord" placeholder="请输入预计经费" v-model="needed.neededs">
          </u-col>
        </u-row>



      </view>


    </view>
    <view class="addItemBtn" @click="addItem">
      <u-icon name="plus" style="font-size: 80rpx;"></u-icon>
    </view>
    <view class="submitBtn" @click="submit">
      提交
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue'

  const activityName = ref()
  const applyReason = ref()
  const show = ref(true)
  const neededMoney = ref([{
    name: '',
    neededs: ''
  }, {
    name: '',
    neededs: ''
  }])

  function addItem() {
    neededMoney.value.push({name:'', neededs: ''})
  }
  
  function submit() {
    console.log("submit");
  }
</script>

<style lang="scss">
  .container {
    margin: 20rpx;
    font-size: 35rpx;

    .activityName {
      margin: 20rpx;

      display: flex;
      flex-direction: row;
    }

    .applyReason {
      margin: 20rpx;

      .reasonBorder {
        border: 1px solid #c6c6c6;
        border-radius: 10rpx;
        margin: 10rpx;
        padding: 20rpx;
        height: 300rpx;
      }
    }

    .needed {
      margin: 20rpx;


      .neededTitle {
        color: #d7d7d7;
        background: #99a9bf;
        height: 100rpx;
        border-radius: 10rpx;
      }

      .neededTitleWord {
        width: 190rpx;
        margin-left: 30rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100rpx;
        border-radius: 10rpx;
      }
    }

    .addItemBtn {
      display: flex;
      justify-content: center;
      align-items: center;
      background: #99a9bf;
      width: 120rpx;
      border-radius: 10rpx;
      margin-left: 280rpx;
    }

    .submitBtn {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 50rpx;
      margin-top: 50rpx;
      background: linear-gradient(to right, #26a4f5, #96c4f5);
      padding: 10rpx;
      border-radius: 20rpx;
    }

  }
</style>

<style scoped lang="scss">
  .wrap {
    padding: 24rpx;
  }

  .u-row {
    margin: 40rpx 0;
  }

  .demo-layout {
    height: 80rpx;
    border-radius: 8rpx;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }
</style>